<template>
  <div class="resp-box">
    <div v-if="status == 0" class="status-box resp-box-info">
      <span>{{this.msg}}</span>
    </div>
    <div v-else-if="status >= 200 && status < 300" class="status-box resp-box-ok">
      <span>{{this.status}} {{this.msg}}</span>
    </div>
    <div v-else-if="status >= 400 && status < 600" class="status-box resp-box-error">
      <span>{{this.status}} {{this.msg}}</span>
    </div>
    <div v-else-if="status == -1" class="status-box resp-box-error">
      <span>{{this.msg}}</span>
    </div>
    <div v-else class="status-box resp-box-warning">
      <span>{{this.status}} {{this.msg}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    status: {
      type: Number,
      default: 200
    },
    msg: {
      type: String,
      default: 'OK'
    }
  },

  data() {
    return {
      statusClass: this.getClass()
    }
  },

  methods: {
    getClass() {
      if (this.status == 200) {
        return 'resp-box-ok';
      } else if (this.status == 500) {
        return 'resp-box-error';
      }
      return 'resp-box-warning';
    },
  }
}
</script>
<style>
.resp-box {
  width: 100%;
  height: 20px;
  text-align: left;
  margin-bottom: 20px;
}
.resp-box-info {
  background-color: #909399;
}
.resp-box-ok {
  background-color: #17C5A6;
}
.resp-box-error {
  background-color: #FD3C3C;
}
.resp-box-warning {
  background-color: #FFB74C;
}
.status-box {
    padding: 15px 20px 12px 20px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: Consolas, "Andale Mono", monospace !important;
    color: white;
}
</style>